<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
 <script src="layui/layui.js"></script> 
 <script src="js/jquery-1.8.2.js" ></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>

<script>
layui.use('table', function(){
	  var table = layui.table;
	  
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,height: 312
	    ,url: 'HCc' //数据接口
	    ,page: true //开启分页
	    
	    ,cols: [[ //表头
		      {field: 'teaID', title: 'ID', width:200, sort: true, fixed: 'left'}
		      ,{field: 'title', title: '茶名', width:150}
		      ,{field: 'teazy', title: '茶的简介', width:150}
		      ,{field: 'uploaduser', title: '上传人', width:150}
		      ,{field: 'date', title: '上传时间', width:150}
		      ,{field: 'pricew', title: '茶的市场估价', width:100}
		      
		     
		      ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
		    
		    ]]
	  
	  });	
	  table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

		    console.log(data);
		    if (layEvent === 'detail') { //查看
		     alert("1");
		     //do somehing
		    } else if (layEvent === 'del') { //删除
		     alert("2");
		     layer.confirm('真的删除行么', function(index) {
		      
		      layer.close(index);
		      //向服务端发送删除指令
		      $.ajax({
		       url : "ScServlet",//地址
		       type : "get",//请求方式
		       data : {"id":data.id}//参数
		       ,
		       success : function(res) {//成功以后的回调函数
		        if (res == 1){
		         obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		         alert("删除成功");
		        }else{
		         alert("删除失败");
		        }
		     
		       }

		      });
		     });
		    } else if (layEvent === 'edit') { //编辑
		     //do something
		     alert("3");
		     //同步更新缓存对应的值
		     obj.update({
		      username : '123',
		      title : 'xxx'
		     });
		    } else if (layEvent === 'LAYTABLE_TIPS') {
		     layer.alert('Hi，头部工具栏扩展的右侧图标。');
		    }
		   });
	});
	
     

 
 </script>

 <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail" >查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>

</body>
</html>